<template>
  <g class="select-player">
    <TextButton
      fill="#96d332"
      :content="SELECTION['rank']"
      :transform="`translate(${BLOCK}, ${BLOCK / 2}) scale(0.5)`"
    />
    <TextButton
      fill="#96d332"
      content="star me on gitee"
      :transform="`translate(${11 * BLOCK}, ${BLOCK / 2}) scale(0.5)`"
      :onClick="starClick"
    />
    <Text
      :content="`\u2160-    00 HI- 20000`"
      :transform="`translate(${BLOCK}, ${1.5 * BLOCK})`"
    />
    <BrickText
      content="battle"
      :transform="`translate(${1.5 * BLOCK}, ${3 * BLOCK})`"
    />
    <BrickText
      content="city"
      :transform="`translate(${3.5 * BLOCK}, ${5.5 * BLOCK})`"
    />
    <TextButton
      v-for="(v, i) in list"
      :key="i"
      :content="v.content"
      :transform="`translate(${5.5 * BLOCK}, ${v.y *BLOCK})`"
      :tag="v.name"
      :activeTag="activeTag"
      @mouseenter="onMouseEnter(v.name)"
      @click="onClick"
    />
    <Tank
      direction="right"
      :shape="1"
      color="yellow"
      :x="4 * BLOCK"
      :y="(7.7 + activeIndex) * BLOCK"
    />
    <Text
      :content="`\u00a9 1980 2025 NAMCO LTD.`"
      :transform="`translate(${5.5 * BLOCK}, ${13.5 * BLOCK}) scale(0.5)`"
    />
    <Text
      content="ALL RIGHTS RESERVED"
      :transform="`translate(${5.5 * BLOCK}, ${14 * BLOCK}) scale(0.5)`"
    />
  </g>
</template>

<script setup>
  import TextButton from '@/components/TextButton.vue'
  import Text from '@/components/Text.vue'
  import BrickText from '@/components/BrickText.vue'
  import Tank from '@/components/Tank.vue'
  import { BLOCK, SELECTION, TANK } from '@/utils/global'
  import { ref, onMounted, onUnmounted } from 'vue'
  import { useRecordStore } from '@/store/gameRecord'
  import { usePlayerStore } from '@/store/player'
  import { useProtectionStore } from '@/store/protection'
  import { useFlickerStore } from '@/store/flicker'

  const list = [
    { name: 'single', content: SELECTION['single'], y: 8 },
    { name: 'double', content: SELECTION['double'], y: 9 },
    { name: 'operate', content: SELECTION['operate'], y: 10 },
    { name: 'mobile', content: SELECTION['mobile'], y: 11 },
  ]

  const recordStore = useRecordStore()
  const playerStore = usePlayerStore()
  const protectionStore = useProtectionStore()
  const flickerStore = useFlickerStore()
  const activeTag = ref('single')
  const activeIndex = ref(0)

  const starClick = () => {
    window.open('https://gitee.com/guozia007/battle-city-electron')
  }

  const toStage = () => {
    if(activeTag.value === 'single' || activeTag.value === 'double') {
      recordStore.period = 'stage'
      recordStore.updateBackground(1)
      recordStore.mode = activeTag.value
      recordStore.stage.count = 1
      recordStore.eagleAlive = true
      flickerStore.bornFlicker('player', 'player1')
      if(activeTag.value === 'double') {
        flickerStore.bornFlicker('player', 'player2')
      }
      // born enemy TOTO
    }
  }

  const onMouseEnter = (tag) => {
    activeTag.value = tag
    activeIndex.value = list.findIndex(v => v.name === tag)
  }

  const onKeyDown = (e) => {
    const len = list.length
    if (e.key === 'ArrowDown') {
      if (activeIndex.value === len - 1) {
        activeIndex.value = 0
      } else {
        activeIndex.value ++
      }
    } else if (e.key === 'ArrowUp') {
      if (activeIndex.value === 0) {
        activeIndex.value = len - 1
      } else {
        activeIndex.value --
      }
    }
    activeTag.value = list[activeIndex.value].name
  }

  const onKeyUp = (e) => {
    if(e.key === 'Enter') {
      toStage()
    }
  }

  const onClick = () => {
    toStage()
  }

  onMounted(() => {
    document.addEventListener('keydown', onKeyDown)
    document.addEventListener('keyup', onKeyUp)
  })

  onUnmounted(() => {
    document.removeEventListener('keydown', onKeyDown)
    document.removeEventListener('keyup', onKeyUp)
  })

</script>

<style lang="scss" scoped>

</style>